<template>
    <div
        class="w-full h-full p-24 box-border"
        v-loading="isLoading"
        element-loading-text="加载中....."
    >
        <template v-if="!isLoading">
            <div class="relative flex w-full h-full">
                <!--左侧会员信息 -->
                <div
                    class="member-info min-content-height h-full echarts-box mt-0 flex-shrink-0"
                    :style="{ background: `url(${useImage('memberDetail', 'headerBg.png')})` }"
                >
                    <div class="mask p-24 flex-col-box">
                        <!-- 会员卡号、头像、性别、昵称 -->
                        <div class="flex-items-box flex-col relative">
                            <!-- 返回按钮 -->
                            <el-button
                                class="absolute top-0 left-0"
                                :icon="TopLeft"
                                circle
                                @click="router.back()"
                            />
                            <!-- 会员卡号 -->
                            <div class="px-6 py-2 top-4 right-0 absolute text-white bg-secondary rounded-4 text-14 flex-items-box">
                                <i class="iconfont icon-huiyuanka-my mr-6"/>{{ memberDetail.memberCardId }}
                            </div>
                            <div class="mt-60 relative">
                                <!-- 头像 -->
                                <el-image :src="memberDetail.userAvatar" fit="cover"/>
                                <!-- 性别 -->
                                <div class="gender-box bg-white rounded-full p-4 absolute flex-center-box common-shadow">
                                    <Icon
                                        :size="18"
                                        :name="memberDetail.gender ? 'Female' : 'Male'"
                                        :style="{ color: memberDetail.gender ? '#A3D0E9' : '#E6779F' }"
                                    />
                                </div>
                            </div>
                            <!-- 用户名 -->
                            <span class="mt-18 text-18">{{ memberDetail.username }}</span>
                        </div>
                        <!-- 标签 -->
                        <div class="mt-60">
                            <div class="title tag-bg">
                                <i class="iconfont icon-biaoqian"/>标签
                            </div>
                            <div class="mt-20 w-full flex flex-wrap px-8">
                                <template v-if="memberDetail.tagList.length">
                                    <el-tag
                                        class="mb-10 mr-10"
                                        v-for="item in memberDetail.tagList"
                                        :key="item"
                                        :type="tagType[getRndInteger(0, tagType.length - 1)]"
                                    >
                                        {{ item }}
                                    </el-tag>
                                </template>
                                <!-- 添加标签弹窗 -->
                                <el-popover :visible="addTagVisible" placement="right" :width="180">
                                    <!-- 标签表单 -->
                                    <el-input
                                        v-model="tagName"
                                        placeholder="请输入标签名"
                                        maxlength="6"
                                        :autofocus="true"
                                    />
                                    <div class="text-center mt-12">
                                        <el-button size="small" text @click="cancelAddTag">取消</el-button>
                                        <el-button size="small" type="primary" @click="addTag">添加</el-button>
                                    </div>
                                    <template #reference>
                                        <el-button
                                            :icon="Plus"
                                            type="primary"
                                            size="small"
                                            plain
                                            @click="addTagVisible = true"
                                        >
                                            添加标签
                                        </el-button>
                                    </template>
                                </el-popover>
                            </div>
                        </div>
                        <!-- 基本信息 -->
                        <div class="mt-42">
                            <div class="title base-info-bg">
                                <i class="iconfont icon-shenfenzhenghao"/>基本信息
                            </div>
                            <div class="info-list">
                                <div><p>手机号</p>：{{ memberDetail.userPhone }}</div>
                                <div><p>身份证号</p>：{{ memberDetail.memberID }}<span/></div>
                                <div><p>生日</p>：{{ dayjs(memberDetail.birthday).format('YYYY-MM-DD') }}<span/></div>
                                <div><p>年龄</p>：{{ memberDetail.age }}<span/></div>
                            </div>
                        </div>
                        <!-- 会员信息 -->
                        <div class="mt-42">
                            <div class="title member-info-bg">
                                <i class="iconfont icon-qinghuiyuan"/>会员信息
                            </div>
                            <div class="info-list member-list">
                                <div><p>会员等级</p>：{{ memberDetail.memberLevelName }}</div>
                                <div><p>会员状态</p>：{{ MemberStatusEnum[memberDetail.memberStatus] }}<span/></div>
                                <div><p>会员时长</p>：{{ memberDetail.memberDuration }} 天<span/></div>
                                <div><p>会员来源</p>：{{ memberDetail.memberSource }}<span/></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 右侧内容 -->
                <div class="flex-between-box ml-24 flex-col flex-1">
                    <!-- 右侧顶部 -->
                    <div class="w-full flex-between-box">
                        <div class="flex-1 flex-between-box h-full flex-wrap">
                            <!-- 累计消费次数、累计消费金额、客单价 -->
                            <div class="flex-items-box wrapper px-24 py-34 flex-wrap justify-between">
                                <div class="data-info relative" v-for="(item, index) in consumptionInfo" :key="item.name">
                                    <div class="flex-items-box data-desc flex-col w-full text-t-default">
                                        <span class="text-16 mt-6">{{ item.name }}</span>
                                        <span class="text-22 font-700 mt-12">{{ item.value }}</span>
                                    </div>
                                    <!-- 中间分割线 -->
                                    <template v-if="(index + 1) % 3 !== 0">
                                        <div class="line rounded-2 bg-primary"/>
                                    </template>
                                </div>
                            </div>
                        </div>
                        <!-- 时间线 -->
                        <div class="time-line flex-shrink-0 ml-24 bg-white common-shadow rounded-14 box-border p-24 pb-0">
                            <div class="mb-24 text-16 text-center text-t-default">时间线</div>
                            <div class="ml-6">
                                <el-timeline>
                                    <el-timeline-item
                                        v-for="(activity, index) in activities"
                                        :key="index"
                                        :icon="activity.icon"
                                        :color="activity.color"
                                        :size="activity.size"
                                    >
                                        <el-card>
                                            <p>{{ activity.content }}</p>
                                            <p class="mt-6" :style="{ color: activity.color }">{{ activity.timestamp }}</p>
                                        </el-card>
                                    </el-timeline-item>
                                </el-timeline>
                            </div>
                        </div>
                    </div>
                    <!-- 右侧底部 -->
                    <div class="w-full flex-1">
                        <div class="flex-1 w-full h-full flex-between-box">
                            <!-- 消费记录 -->
                            <div class="flex-col-box flex-1 box-border">
                                <view class="flex-1 px-24 py-30 box-border mt-24 bg-white common-shadow rounded-14">
                                    <!-- 搜索条件 -->
                                    <div class="flex-between-items-box items-center">
                                        <div class="text-16 text-t-title">消费记录</div>
                                        <div class="flex">
                                            <el-select
                                                style="width: 130px;"
                                                v-model="searchParams.listOrder"
                                                class="mr-10"
                                                placeholder="请选择"
                                                :teleported="false"
                                            >
                                                <el-option label="按最近" value="asc">按最近</el-option>
                                                <el-option label="按最早" value="dsc">按最早</el-option>
                                            </el-select>
                                            <el-date-picker
                                                v-model="searchParams.timeRangeValue"
                                                type="daterange"
                                                range-separator="至"
                                                start-placeholder="起始时间"
                                                end-placeholder="结束时间"
                                            />
                                        </div>
                                    </div>
                                    <!-- 表格数据 -->
                                    <div class="mt-20 w-full flex-shrink-0">
                                        <el-table :data="tableData" stripe>
                                            <el-table-column prop="goodsName" label="商品名称" width="250">
                                                <template v-slot="{ row }">
                                                    {{ cropText(row.goodsName, 10) }}
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="goodsClass" label="商品分类">
                                                <template v-slot="{ row }">
                                                    {{ GoodsClassEnum[row.goodsClass]  }}
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="purchaseTime" label="购买时间" width="180"/>
                                            <el-table-column prop="goodsPrice" label="商品金额">
                                                <template v-slot="{ row }">
                                                    ￥{{ row.goodsPrice  }}
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="orderStatus" label="订单状态"/>
                                            <el-table-column fixed="right" label="操作" align="center">
                                                <template #default>
                                                    <el-button type="primary" size="small" @click="handleClick">查看订单</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </view>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
    cropText, ElMessages, getRndInteger, timeout, useImage
} from '@utils/methods'
import { Plus, TopLeft } from '@element-plus/icons-vue'
import {
    httpAddTag,
    httpUserDetail,
    MemberDetail,
    MemberDetailSearchParams,
    MemberStatusEnum
} from '@/api/module/memberManage'
import { GoodsClassEnum } from '@/api/module/goodsCenter'
import dayjs from 'dayjs'
import Icon from '@/components/Icon/index.vue'

// 页面加载
const isLoading = ref(true)

// 路由
const router = useRouter()
const { query } = useRoute()

// 会员详情
const memberDetail = ref<MemberDetail>({
    userId: 0,
    username: '',
    userAvatar: '',
    gender: null,
    memberCardId: '',
    memberLevel: 0,
    userPhone: '',
    enterTime: '',
    memberID: '',
    birthday: '',
    memberStatus: 1,
    memberSource: '',
    age: 0,
    memberDuration: 0,
    tagList: []
})

// 获取会员详情
const getUserDetail = () => {
    const nowTime = dayjs(`${new Date()}`).format('YYYY-MM-DD')
    httpUserDetail({
        userId: <number><unknown>query.id
    }).then(res => {
        const result = res.data
        // 获取会员生日
        const memberBirthday = dayjs(result.birthday).format('YYYY-MM-DD')
        // 计算会员年龄
        result.age = dayjs(nowTime).diff(memberBirthday, 'year')
        // 计算会员时长
        result.memberDuration = dayjs(nowTime).diff(result.enterTime, 'day')
        // 重命名会员昵称
        result.memberLevelName = result.levelName
        // 身份证号脱敏
        // 赋值
        memberDetail.value = result
    }).finally(async () => {
        await timeout(500)
        // 关闭加载
        isLoading.value = false
    })
}

getUserDetail()

/**
 * 标签
 * */
// 标签颜色类型
const tagType: string[] = ['default', 'success', 'info', 'warning', 'danger']

// 添加标签弹窗
const addTagVisible = ref(false)

// 添加标签名
const tagName = ref('')

// 取消添加
const cancelAddTag = () => {
    addTagVisible.value = false
    tagName.value = ''
}

// 添加标签
const addTag = () => {
    if (!tagName.value) {
        ElMessages.warning('请输入标签')
        return
    }
    // 添加标签接口
    httpAddTag({
        tagName: tagName.value,
        memberCardId: memberDetail.value.memberCardId
    }).then(({ success }) => {
        if (success) {
            addTagVisible.value = false
            ElMessages.success('添加成功！')
            memberDetail.value.tagList.push(tagName.value)
            tagName.value = ''
        } else {
            ElMessages.error('添加失败')
        }
    })
}

// 顶部消费数据类型
interface ConsumptionInfo {
    /** @description 数据名称 */
    name: string
    /** @description 数据值 */
    value: string
    /** @description 数据颜色 */
    color: string
}

// 右侧顶部消费数据
const consumptionInfo = reactive<ConsumptionInfo[]>([
    { name: '累计消费金额（元）', value: '377.00', color: '#6EB33C' },
    { name: '累计消费次数', value: '3', color: '#FB7F30' },
    { name: '客单价', value: '125.67', color: '#409EFF' },
    { name: '最近在线时间', value: '2023-05-07 11:40', color: '#F56C6C' },
    { name: '消费频次', value: '1', color: '#F56C6C' },
    { name: '累计在线时长', value: '1.5小时', color: '#F56C6C' }
])

// 时间线数据类型
interface Activities {
    /** @description  */
    color?: string
    /** @description  */
    content: string
    /** @description  */
    timestamp: string
    /** @description  */
    size?: string
    /** @description 时间点图标 */
    icon?: string
}

// 时间线数据
const activities = reactive<Activities[]>([
    {
        content: '最近一次消费时间',
        timestamp: '2023-05-07 14:27:56',
        icon: 'CircleCheck',
        color: '#0bbd87'
    },
    {
        content: '再次下单时间',
        timestamp: '2023-05-06 12:01:23',
        size: 'large',
        color: '#F56C6C',
        icon: 'Coin'
    },
    {
        content: '成为会员时间',
        timestamp: '2023-05-05 22:30:41'
    }
])

// 查询数据
const searchParams = reactive<MemberDetailSearchParams>({
    listOrder: 'asc',
    timeRangeValue: []
})

const handleClick = () => {
    console.log('click')
}

// 表头数据
// const tableHeadData = [
//     { prop: 'goodsName', label: '商品名称', width: 150 },
//     { prop: 'goodsClass', label: '商品分类' },
//     { prop: 'purchaseTime', label: '购买时间' },
//     { prop: 'goodsPrice', label: '商品金额' },
//     { prop: 'orderStatus', label: '订单状态' },
//     { prop: 'operation', label: '操作' }
// ]

// 消费记录
const tableData = [
    {
        goodsName: '谷雨光感美白精华液15ml',
        goodsClass: 1,
        purchaseTime: '2023-05-07 14:27:56',
        goodsPrice: '159.00',
        orderStatus: '已完成'
    },
    {
        goodsName: '谷雨氨基酸卸妆膏85g 深层清洁毛孔温和乳化快眼唇可用',
        goodsClass: 1,
        purchaseTime: '2023-05-06 12:01:23',
        goodsPrice: '119.00',
        orderStatus: '已完成'
    },
    {
        goodsName: '谷雨仙人掌果舒润高保湿面膜8片*2盒 补水滋润保湿【周冬雨同款】',
        goodsClass: 2,
        purchaseTime: '2023-05-05 22:30:41',
        goodsPrice: '99.00',
        orderStatus: '已完成'
    }
]
</script>

<style lang="less" scoped>
@import "./index";
</style>
